---
title: Dividers
description: Selection of layout dividers components created with Tailwind CSS v4. These responsive horizontal dividers include basic, gradient, and aligned styles for separating content sections in your web applications and UI designs.
category: application
emoji: 🗡️
slug: dividers
wrapper: h-[200px]
terms:
  - layout
  - separator
components:
  - { title: 'Base', dark: true }
  - { title: 'Gradient', dark: true }
  - { title: 'Left align', dark: true }
  - { title: 'Left align gradient', dark: true }
  - { title: 'Right align', dark: true }
  - { title: 'Right align gradient', dark: true }
---

import CollectionHeader from '../../../components/CollectionHeader.astro'

<CollectionHeader>
  # Divider Components

  <p>{frontmatter.description}</p>
</CollectionHeader>
